import React, { Component } from 'react'

import { BrowserRouter as Router, Route, Switch } from 'react-router-dom'

import App from './App'
import LoginPages from './pages/Login'
import CommonPages from './pages/Common'
import AdminPages from './pages/Admin'
import NotFoundPages from './pages/Notfound'
// 测试redux页面可以后期删除
import TextPages from './components/Testredux/Testredux'
//加载组件
import ButtonPages from './components/Ui/Button/Button'
import ModalsPages from './components/Ui/Modals/Modal'
import HomePages from './components/Home/Home'
import LoadingComponentPages from './components/Ui/Loadings/Loading'
import Notification from './components/Ui/Notification/Notification'
import Messages from './components/Ui/Messages/Message'
import Tabs from './components/Ui/Tabs/Tabs'
import Gallery from './components/Ui/Gallery/Gallery'
import Carsousel from './components/Ui/Carsousel/Carsousel'
import LoginForm from './components/Form/Login/Login'
import ResiterForm from './components/Form/Register/Register'
import BasicTable from './components/Table/BasicTable/BasicTable'
import HighTable from './components/Table/HighTable/HighTable'
import RichComponent from './components/Rich/Rich'
import CityComponent from './components/City/City'
import OrderComponent from './components/Order/Order'
import BarComponent from './components/BarComponent/BarComponent'
import CommonDetail from './components/CommonDetail/CommonDetail'
import UserManage from './components/UserManage/UserManager'
import BikeMap from './components/BikeMap/BikeMap'
import PieComponent from './components/PieComponent/PieComponent'
import ZhexianComponent from './components/ZhexianComponent/ZhexianComponent'
import QuanXianComponent from './components/Quanxian/Quanxian'
// 思路就是index.js加载路由,路由里面最外层是App,App里面在嵌套。二级路由这里和Vue不一样,必须是写全了
class RouterDom extends Component {
  state = {}
  render() {
    return (
      <Router>
        <App>
          <Switch>
            <Route exact path="/" component={LoginPages}></Route>
            {/*加载测试后期可以删除*/}
            <Route exact path="/textpage" component={TextPages}></Route>
            <Route
              path="/admin"
              render={() => (
                <AdminPages>
                  <Switch>
                    {/* 在React里面路径必须写全称二级的也必须带上前面 */}
                    <Route path="/admin/home" component={HomePages}></Route>
                    <Route
                      path="/admin/ui/buttons"
                      component={ButtonPages}
                    ></Route>
                    <Route
                      path="/admin/ui/modals"
                      component={ModalsPages}
                    ></Route>
                    <Route
                      path="/admin/ui/loadings"
                      component={LoadingComponentPages}
                    ></Route>
                    <Route
                      path="/admin/ui/notification"
                      component={Notification}
                    ></Route>
                    <Route
                      path="/admin/ui/messages"
                      component={Messages}
                    ></Route>
                    <Route path="/admin/ui/tabs" component={Tabs}></Route>
                    <Route path="/admin/ui/gallery" component={Gallery}></Route>
                    <Route
                      path="/admin/ui/carousel"
                      component={Carsousel}
                    ></Route>
                    <Route
                      path="/admin/form/login"
                      component={LoginForm}
                    ></Route>
                    <Route
                      path="/admin/form/reg"
                      component={ResiterForm}
                    ></Route>
                    <Route
                      path="/admin/table/basic"
                      component={BasicTable}
                    ></Route>
                    <Route
                      path="/admin/table/high"
                      component={HighTable}
                    ></Route>
                    <Route
                      path="/admin/order"
                      component={OrderComponent}
                    ></Route>
                    <Route
                      path="/admin/charts/bar"
                      component={BarComponent}
                    ></Route>
                    <Route
                      path="/admin/charts/line"
                      component={ZhexianComponent}
                    ></Route>
                    <Route
                      path="/admin/charts/pie"
                      component={PieComponent}
                    ></Route>
                    <Route
                      path="/admin/permission"
                      component={QuanXianComponent}
                    ></Route>
                    <Route path="/admin/bikeMap" component={BikeMap}></Route>
                    <Route path="/admin/rich" component={RichComponent}></Route>
                    <Route
                      path="/admin/usermanage"
                      component={UserManage}
                    ></Route>
                    <Route path="/admin/city" component={CityComponent}></Route>
                    <Route to="/notfound" component={NotFoundPages}></Route>
                  </Switch>
                </AdminPages>
              )}
            ></Route>
            {/* 上面找不到的就用to这样他会自动匹配 */}
            <Route
              path="/common"
              render={() => {
                return (
                  <CommonPages>
                    <Switch>
                      <Route
                        path="/common/orderdetail/:id"
                        component={CommonDetail}
                      ></Route>
                    </Switch>
                  </CommonPages>
                )
              }}
            ></Route>
            <Route to="/notfound" component={NotFoundPages}></Route>
          </Switch>
        </App>
      </Router>
    )
  }
}

export default RouterDom
